<template>
  <div class="messageAlert">
    <el-timeline>
      <el-timeline-item v-for="(item,index) in messageData" :key="index" :timestamp="item.day" placement="top" type="primary" >
        <el-card v-for="(v,k) in item.child" :key="k">
          <h4>{{v.title}}</h4>
          <p>{{v.name}} 提交于 {{v.time}}</p>
        </el-card>
      </el-timeline-item>
      
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageData: [
        {
          day: "2020-10-20",
          child: [
            {
              title: "xxx项目需求变更_01xxx项目需求变更_01",
              name: "张三",
              time: "2020-10-20 10:05"
            },
            {
              title: "xxx项目需求变更_01",
              name: "张三",
              time: "2020-10-20 10:05"
            },
            {
              title: "xxx项目需求变更_01",
              name: "张三",
              time: "2020-10-20 10:05"
            },
            {
              title: "xxx项目需求变更_01",
              name: "张三",
              time: "2020-10-20 10:05"
            }
          ]
        },
        {
          day: "2020-10-21",
          child: [
            {
              title: "xxx项目需求变更_02",
              name: "张三",
              time: "2020-10-21 10:05"
            },
            {
              title: "xxx项目需求变更_02",
              name: "张三",
              time: "2020-10-21 10:05"
            },
            {
              title: "xxx项目需求变更_02",
              name: "张三",
              time: "2020-10-21 10:05"
            },
            {
              title: "xxx项目需求变更_02",
              name: "张三",
              time: "2020-10-21 10:05"
            }
          ]
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.messageAlert {
}
</style>
